<template>
  <div class="search-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      fixed
      placeholder 
      class="top-nav-bar"
      @click-left="$router.push({name: 'home'})"
      @click-right="searchBtnIsShow = true"
    >
      <template #left>
        <div class="top-nav-bar-left-img-box" v-show="!searchBtnIsShow">
          <img src="@/assets/meiuo-logo.png" alt="">
        </div>
        <div v-show="searchBtnIsShow">
          <van-icon name="arrow-left" color="#ee0a24" class="icon"/>
          <span style="color: #ee0a24">返回</span>
        </div>
      </template>
      <template #right>
        <van-icon name="search" size="25" color="#ee0a24" v-show="!searchBtnIsShow"/>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-sticky :offset-top="50">
      <van-search 
        v-model="searchContent" 
        placeholder="请输入搜索关键词" 
        @search="searchGoods"
        show-action
        v-show="searchBtnIsShow"
        clearable
      >
        <template #action>
          <div @click="searchGoods">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <!-- 对商品进行筛选 -->
    <van-sticky :offset-top="50">
      <van-dropdown-menu v-show="!searchBtnIsShow">
        <!-- 筛选子菜单1 -->
        <van-dropdown-item v-model="value" :options="option" @close="selectGoods">
          <van-cell center title="降序排序">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
        </van-dropdown-item>
        <!-- 筛选子菜单2 -->
        <van-dropdown-item title="筛选" ref="item" @close="selectGoods">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <!-- 商品展示列表 -->
    <div class="goods-list-box" v-show="!searchBtnIsShow">
      <GoodsListItem v-for="goods in goodsListShow" :key="goods.id" :goods="goods"></GoodsListItem>
    </div>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, Cell, Switch } from 'vant';
import { Search, Sticky } from 'vant'
import GoodsListItem from '@/components/GoodsListItem.vue'

export default {
  name: 'Search',
  components: {
    [Search.name]: Search,
    [Sticky.name]: Sticky,
    [Cell.name]: Cell,
    [Switch.name]: Switch,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    GoodsListItem,
  },
  data() {
    return {
      searchContent: '', // 搜索框的内容
      searchBtnIsShow: true, // 搜索框是否显示
      goodsList: [], // 商品列表，原始数据
      goodsListShow: [], // 商品列表，进行展示的数据
      value: 0, // 选择哪种排序
      switch1: false, // 是否包邮
      switch2: false, // 升序还是降序，默认升序
      option: [
        { text: '默认排序', value: 0 },
        { text: '价格排序', value: 1 },
        { text: '销量排序', value: 2 },
        { text: '评价数排序', value: 3 },
      ],
    }
  },
  methods: {
    // 搜索商品信息
    searchGoods() {
      this.req.get(
        'goods/goodsList/',
        {
          params: {
            searchContent: this.searchContent
          }
        }
      ).then(res=>{
        let data = res.data
        if (data.mark === 1) {
          this.goodsList = data.goodsList
          this.goodsListShow = data.goodsList
          this.searchContent = ''
          this.searchBtnIsShow = false
          this.value = 0  // 重置筛选参数
          this.switch1 = false
          this.switch2 = false
        } else {
          this.$toast.fail('暂无商品信息，请更换搜索关键词')
          this.goodsList = [] // 情况先前查询出来的商品信息
          this.searchContent = ''
        }
      }, err=>{
        this.$toast.fail(err)
        this.searchContent = ''
      })
    },
    // 对商品进行筛选
    selectGoods() {
      let goodsList = JSON.parse(JSON.stringify(this.goodsList)) // 深拷贝数组
      if (this.switch1 === true) {  // 如果包邮
        goodsList = goodsList.filter((goods)=>{
          return Number(goods.goodsFreight) == 0
        })
      }
      if (this.value === 1) {
        goodsList = goodsList.sort((goods1, goods2)=>{
          return Number(goods1.goodsPrice) - Number(goods2.goodsPrice)
        })
      }
      if (this.value === 2) {
        goodsList = goodsList.sort((goods1, goods2)=>{
          return Number(goods1.goodsSaleNumber) - Number(goods2.goodsSaleNumber)
        })
      }
      if (this.value === 3) {
        goodsList = goodsList.sort((goods1, goods2)=>{
          return Number(goods1.goodsCommentNumber) - Number(goods2.goodsCommentNumber)
        })
      }
      if (this.switch2 == true) goodsList = goodsList.reverse()
      this.goodsListShow = goodsList
    } 
  },
}
</script>

<style lang="less" scoped>
.search-container {
  min-height: 100vh;
  background: #eee;
}
.icon {
  color: #ee0a24;
}
</style>